<template>
    <section class="area_about">
    	<p class="top_tab">
  				<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
				  <el-tab-pane
				    v-for="(item, index) in editableTabs2"
				    :key="item.name"
				    :label="item.title"
				    :name="item.name"
				  > 
				  	<area-gaishu @addTab="addTab" v-if="item.type=='gaishu'"></area-gaishu>
				    <area-detail :detailId="detailId" @addTab="addTab" v-if="item.type==='detail'"></area-detail>		
				    <dangan-all :danganType="danganType" :danganId="danganId" v-if="item.type==='dangan'"></dangan-all>
				  </el-tab-pane>
				</el-tabs>
				
				
        </p>
         			
    </section>
</template>

<script>
    import areaDetail from "./components/areaDetail"
    import shareServer from "./components/shareServer"
    import danganAll  from "./components/danganAll"
    import collectServer from "./components/collectServer"
    import areaGaishu from "./components/areaGaishu"
    export default {
    	components:{
    		areaDetail,
    		shareServer,
    		collectServer,
    		areaGaishu,
    		danganAll
    	},
        data() {
               return {
               		activeTab:'区域概述',
               		detailId:0,
               		danganId:0,
			        editableTabsValue2: '1',
			        targetNameTitle:['','区域概述'],/*已经有的名单*/
			        targetNameType:['gaishu'],/*已经有的名单*/
			        editableTabs2: [
				        {
				          title: '区域概述',
				          name: '1',
				          type:'gaishu'
				        }, 
			        ],
			        tabIndex:1,
			        
			    }
        },
           methods: {
//		      addTab(targetName) {
//		      	if(this.targetNameTitle.indexOf(targetName.title)===-1){
//		      		   let newTabName = ++this.tabIndex + '';
//				        this.targetNameTitle.push(targetName.title);
//				        this.editableTabs2.push({
//				          title: targetName.title,
//				          name: newTabName,
//				        });
//				        if(targetName.title==='区域详情'){
//				        	this.detailId = targetName.id;     
//				        }else if(targetName.title==='共享服务档案'){
//				        	this.shareId = targetName.id;     
//				        }else if (targetName.title==='采集服务档案'){
//				        	this.collectId = targetName.id;    
//				        }
//				        this.editableTabsValue2 = newTabName;
//		      	}else{
//		      			if(targetName.title==='区域详情'){
//				        	this.detailId = targetName.id;     
//				        }else if(targetName.title==='共享服务档案'){
//				        	this.shareId = targetName.id;     
//				        }else if (targetName.title==='采集服务档案'){
//				        	this.collectId = targetName.id;    
//				        }
//		      		 this.editableTabsValue2 = String(this.tabIndex);
//		      	}
//		      },
			  addTab(targetName){
//			  	alert("daw");
			  	console.log(targetName);
			  	if(this.targetNameType.indexOf(targetName.type)===-1){
		      		   let newTabName = ++this.tabIndex + '';
				        this.targetNameType.push(targetName.type);
				        this.editableTabs2.push({
				          title: targetName.title,
				          name: newTabName,
				          type:targetName.type
				        });
				        if(targetName.title==='区域详情'){
				        	this.danganType = 'detail'
				        	this.detailId = targetName.id;     
				        }else if(targetName.title==='共享服务档案'){
				        	this.danganId = targetName.id;
				        	this.danganType = 'share'
				        }else if (targetName.title==='采集服务档案'){
				        	this.danganId = targetName.id;   
				        	this.danganType='collect'
				        }
				        this.editableTabsValue2 = newTabName;
		      	}else{
//		      				alert("2");
//		      				 let newTabName = ++this.tabIndex + '';
		      			if(targetName.title==='区域详情'){
				        	this.detailId = targetName.id;
				        	this.danganType = 'detail'
				        }else if(targetName.title==='共享服务档案'){
				        	this.editableTabs2[this.targetNameType.indexOf(targetName.type)].title='共享服务档案'
				        	this.danganId = targetName.id;
				        	this.danganType = 'share'  
				        }else if (targetName.title==='采集服务档案'){
				        	this.editableTabs2[this.targetNameType.indexOf(targetName.type)].title='采集服务档案'
				        	this.danganId = targetName.id;   
				        	this.danganType='collect'
				        }
		      		 this.editableTabsValue2 = String(this.tabIndex);
		      	}
			  },
		      removeTab(targetName) {
		      	console.log(targetName);
		        let tabs = this.editableTabs2;
		       
		        let activeName = this.editableTabsValue2;
		        if (activeName === targetName) {
		          tabs.forEach((tab, index) => {
		            if (tab.name === targetName) {
		              let nextTab = tabs[index + 1] || tabs[index - 1];
		              if (nextTab) {
		                activeName = nextTab.name;
		              }
		            }
		          });
		        }
		        
		        this.editableTabsValue2 = activeName;
//		       
 				let splici =0;
		        for(let i in this.editableTabs2){
		        	if(targetName===this.editableTabs2[i].name){
		        		splici = i 
		        	}
		        }
		        this.targetNameType.splice(splici,1);
		        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
		        
		      }
		    },
		mounted(){
		}
  };
</script>



<style >
    .area_about{
    	padding: 12px;
    	background: #F0F0F0;
    	/*overflow-y: scroll;*/
    	/*height: 100%;*/
    }
    .area_about li{
    	list-style: none;
    }
    .area_about .top_tab{
    	background: #fff;
    	border-radius: 6px;
    }
    .area_about .el-tabs__header{
    	margin:unset
    }
</style>